<template>
    <div class="item-box">
        <div class="cover-box-item"></div>
        <div class="title">
            《庆余年》
        </div>
        <div class="item-title">
            第16章 我是谁
        </div>
        <div class="star-box">
            <div class="star"></div>
            <div class="star"></div>
            <div class="star"></div>
        </div>
        <button class="btn" @click="toDetail">开始阅读</button>
        <div class="cover-img-active"></div>
    </div>
</template>
<script>
export default {
    methods: {
        toDetail() {
            location.href = "/ticket/"
        }
    }
}
</script>
<style lang="less" scoped>
.item-box {
    height: 284px;
    position: relative;
    background: url("../assets/image/img_book_05.png") no-repeat center;
    background-size: cover;
    .cover-box-item {
        background-color: rgba(48, 152, 212, 0.6);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .title {
        width: 154px;
        height: 30px;
        font-size: 22px;
        line-height: 30px;
        font-weight: 500;
        color: #fff;
        text-align: center;
        position: absolute;
        top: 91px;
        left: 23px;
    }
    .item-title {
        width:140px;
        height:20px;
        font-size:14px;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:20px;
        position: absolute;
        left: 33px;
        top: 128px;
    }
    .star-box {
        position: absolute;
        top: 155px;
        left: 33px;
        .star {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("../assets/image/icon_star.png") no-repeat center;
            background-size: 20px 20px;
        }
    }
    .btn {
        width: 84px;
        height: 30px;
        border-radius:18px;
        background-color: #fff;
        text-align: center;
        line-height: 30px;
        border: 0;
        color: #242B53;
        position: absolute;
        left: 33px;
        top: 190px;
        outline: none;
    }
    .cover-img-active {
        width: 106px;
        height: 146px;
        position: absolute;
        background: url("../assets/image/img_book_05.png") no-repeat center;
        right: 15px;
        top: 82px;
        background-color: #fff;
        background-size: 106px 146px;
        border-radius: 4px;
    }
}
    
</style>